import { View } from '@tarojs/components'
import Icon from 'components/Icon'
import s from './index.module.scss'
import { useState } from 'react'

export interface TabItem {
  icon: string,
  component: () => JSX.Element
}

export interface SideNavbarProps {
  tabs: TabItem[],
  onChange?: (current: number) => any
}

export default function SideNavbar(props: SideNavbarProps) {
  const {tabs = [], onChange} = props
  const [current, setCurrent] = useState(0)

  function selected(current: number) {
    setCurrent(current)
    onChange && onChange(current)
  }

  return (
    <View className={s.container}>
      {tabs.map((item, index) => (
        <View
          key={item.icon}
          className={current === index ? `${s.icon_wrapper} ${s.active}` : s.icon_wrapper}
          onClick={() => selected(index)}
        >
          <Icon className={s.icon} name={item.icon} size={24} />
        </View>  
      ))}
    </View>
  )
}

export function SideNavTabs(props: SideNavbarProps) {
  const [current, setCurrent] = useState(0)
  let __component = props.tabs[current].component

  return (
    <View>
      <SideNavbar
        tabs={props.tabs}
        onChange={(current) => {
          setCurrent(current)
        }}
      />
      <__component />
    </View>
  )
}
